{% extends webapp_config['LAYOUT'] %}

{% block meta_title %}
  {% if query %}
    Snap search results for '{{ query }}'
    {% if category_display %}
      in {{ category_display }}
      {% endif %}
  {% elif category_display %}
    {{ category_display }}
  {% else %}
    Search Snap Store
  {% endif %}
  — Linux software in the Snap Store
{% endblock %}

{% block content %}
  <section id="main-content" class="p-strip--image is-shallow snapcraft-banner-background">
  <div class="u-fixed-width">
    <form action="/search" class="p-form p-form--inline p-form--search">
      <div class="p-form__group">
        <label for="search-input" class="u-off-screen">Search</label>
        <div class="p-form__control u-clearfix">
          <input class="u-no-margin--bottom" id="search-input" type="search" name="q" value="{{ query }}" />
        </div>
      </div>
      <button type="submit" alt="search" class="p-button--positive">Search</button>
    </form>
  </div>
  </section>

  <section class="p-strip is-shallow">
    {% if searched_snaps or featured_snaps %}
      <div class="u-fixed-width">
        {% if not query and category_display %}
          <a href="/store">&lsaquo; Categories</a>
          <h2>{{ category_display }} snaps</h2>
        {% else %}
          {% if total %}
            <h2>We’ve found {{ total }} snaps</h2>
          {% else %}
            <h2>We’ve found some snaps</h2>
          {% endif %}
        {% endif %}
      </div>
      <div class="js-store-category">
        {% if not query and category_display and featured_snaps %}
          {% set has_featured = True %}
          {% set show_summary = True %}
          {% set snaps = featured_snaps %}
          {% include "store/_category-partial.html" %}
          </div>
          {% if searched_snaps %}
            <div class="p-strip is-shallow u-no-padding--bottom">
              <div class="u-fixed-width">
                <h3>All {{ category_display|lower }} snaps</h3>
              </div>
              <div class="row">
                {% set show_summary = False %}
                {% for snap in searched_snaps %}
                  <div class="col-3 col-medium-2">
                    {% include 'store/_media-object-snap-partial.html' %}
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% else %}
          <div class="row">
            {% for snap in searched_snaps %}
              <div class="col-3 col-medium-2">
                {% include 'store/_media-object-snap-partial.html' %}
              </div>
            {% endfor %}
          </div>
        {% endif %}
    {% else %}
      <div class="row">
        {% if query %}
          <h2>We couldn't find anything for your search <div class="no-search-query">{{query}}.</div></h2>
          <h4>Try using some different, or more general keywords.</h4>
        {% else %}
          <h2>We couldn't find the category <div class="no-search-query">{{category_display}}.</div></h2>
        {% endif %}
      </div>
    {% endif %}
  </section>

  {% if (searched_snaps or featured_snaps) and links %}
  <section class="p-strip is-shallow u-no-padding--top">
    <nav class="u-fixed-width u-clearfix">
      <div class="u-float-left u-align--left">
        {% if links.first %}<a href="{{ links.first }}">&#171;&nbsp;First</a>&nbsp;{% endif %}
        {% if links.prev %}<a href="{{ links.prev }}">&#8249;&nbsp;Previous</a>{% endif %}
      </div>
      <div class="u-float-right u-align--right">
        {% if links.next %}<a href="{{ links.next }}">Next&nbsp;&#8250;</a>{% endif %}
        {% if links.last %}&nbsp;<a href="{{ links.last }}">Last&nbsp;&#187;</a>{% endif %}
      </div>
    </nav>
  </section>
  {% endif %}
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
{% endblock %}

{% block scripts %}
  {% if page == 1 %}
    <script>
      window.addEventListener("DOMContentLoaded", function() {
        Raven.context(function () {
          snapcraft.public.getColour(
            document.querySelector(".js-store-category"),
            ".p-featured-snap__icon img",
            ".p-featured-snap"
          );
        });
      });
    </script>
  {% endif %}
{% endblock %}
